﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Validação de Formulario</title>
</head>
<body>
    <center>
        <h1>
            Validação de Formulario</h1>
    </center>
    <div style="width: 500px; height: 300px; margin-left: 400px; margin-top: 100px; font-family: Arial;
        font-size: 15px; text-align: justify; color: #000;">
        Primeiro vamos criar um formulário contendo os campos a serem validados… segue abaixo o código para criar o formulário:<br /><br />
        <textarea style="width: 400px; height: 300px;" disabled="disabled" rows="" cols="">
        <form name="frmTeste" method="post" action="#"
onsubmit="return validaForm(this);">
  <p>Teste de validação de formulário
</p>
  <p>Nome:
    <input type="text" name="nome" id="nome" />
  </p>
  <p>Email:
    <label>
      <input type="text" name="email" id="email" />
    </label>
  </p>
  <p>Sexo:
    <label>
      <input type="radio" name="sexo" value="M" id="masc" />
      Masculino</label>
    <label>
      <input type="radio" name="sexo" value="F" id="fem" />
    Feminino</label>
  </p>
  <p>Profissão:
    <label>
      <select name="prof">
        <option value="">Selecione...</option>
        <option value="programador">Programador</option>
        <option value="designer">Designer</option>
        <option value="webwriter">Web Writer</option>
        <option value="Todas">Todas</option>
      </select>
    </label>
  </p>
  <p>Sobre Você:</p>
  <p>
    <label>
      <textarea name="sobre" cols="35" rows="6" id="sobre">
      </textarea>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="concordo" id="concordo"
 value="sim" />
    </label>
  Concordo com política de uso.</p>
  <p>
    <label>
      <input type="submit" name="sbt" value="Enviar" />
    </label>
    <br />
  </p>
</form>
        </textarea>
        O código acima deve ser digitado dentro do corpo de seu documento <body> </body> . Repare na tag form, o atributo onsubmit retorna toda a validação, ou seja, ele chama a função validaForm.
        <br /><br />
O principal é sempre observar os nomes dados aos campos pois é a partir dos nomes que validamos o formulário. Fique atento aos atributos name do formulário!
<br /><br />
Abaixo, confira o código de validação em JavaScript. Ele deve ser digitado dentro do cabeçalho do documento <head> </head>. Para facilitar seu estudo o código está comentado.
<br /><br />
<textarea style="width: 500px; height: 1500px;" disabled="disabled" rows="" cols="">
<script type="text/javascript">
<!--
function validaForm(frm) {
// O paramêtro frm desta função significa: this.form,
pois a chamada da função - validaForm(this), foi setada na tag form.
// Vamos verificar se o campo nome foi preenchido e se ele
contém no mínio três caracteres.
if(frm.nome.value == "" || frm.nome.value == null ||
frm.nome.value.length < 3) {
 // Exibiremos um alerta, caso o campo esteja vazio.
 alert("Por favor, informe-nos o seu nome.");
 // Vamos setar um focus no campo.
 frm.nome.focus();
 // Bloqueando o envio do form.
 return false;
}
// O campo e-mail precisa conter: "@", "." e não pode estar vazio.
if(frm.email.value.indexOf("@") == -1 ||
frm.email.value.indexOf(".") == -1 || frm.email.value == "" ||
frm.email.value == null) {
 alert("Por favor, informe-nos um e-mail válido.");
 frm.email.focus();
 return false;
}
// O usuário precisa selecionar um dos dois radio buttons
- Masculino ou Feminio.
escolhaSexo = -1; // Um valor negativo default (padrão) que
significa que nada foi escolhido ainda.
// Um loop entre os radios button com o mesmo nome: sexo.
Veja a lógica.
// x = frm.sexo.length -1 é a mesma coia que: x = 2 - 1, que
resultaria em 1.
// x > -1 significa que o valor de x não pode ser igual a -1 e
sim maior, pq -1 significa que nada foi escolhido.
// x-- um decremento do valor x, seria algo como: x = 1, x = 0 e
pára pois x não pode ser -1.
for (x = frm.sexo.length -1; x > -1; x--) {
 // checked quer dizer selecionado, então verifico se o
primeiro (0) ou o segundo (1) radio foi selecionado (checked).
if(frm.sexo[x].checked) {
  // Seta o valor de x a variável escolhaSexo;
  escolhaSexo = x;
 }
}
// Se nenhuma das opçõs - Masculino ou Feminino forem
escolhidas, exibo uma alerta e bloqueio o envio.
if(escolhaSexo == -1) {
 alert("Qual o seu sexo? Informe-nos.");
 frm.sexo[0].focus();
 return false;
}
// Validar a profissão; quero que o usuário escolha uma entre
as três opções - Programador, Designer e Web Writer. E não quero
que ele escolha selecione... ou todos.
if(frm.prof.value == "" || frm.prof.value == "Todas") {
 alert("No momento, precisamos de especialistas em suas áreas,
diga-nos sua profissão entre as três disponivéis:nProgramador;
nDesigner;nWeb Writer.");
 frm.prof.focus();
 return false;
}
// Validar a textarea é como valir um campo de texto simples.
if(frm.sobre.value == "" || frm.sobre.value == null) {
 alert("Por favor, conte-nos um pouco sobre você.");
 frm.sobre.focus();
 return false;
}
// Verificar se o checkbox foi selecionado.
if(frm.concordo.checked == false) {
 alert("Você precisa estar de acordo com nossa política de uso.");
 frm.concordo.focus();
 return false;
}
// Como tudo está correto, vamos permitir o envio do formulário.
alert('Você preencheu o formulário como esperávamos; obrigado.');
return true;
}
//-->
</script> 
</textarea>
        <br />
        <br />
        <a href="TutoJavaScript.htm">Voltar a Página</a>
    </div>
</body>
</html>
